<template>
  <view class="detail">
    <view class="navs">
      <navigator
        url="/packageA/order/index"
        open-type="navigate"
        hover-class="none"
      >
        <u-icon name="arrow-leftward"></u-icon>
      </navigator>
      <view class="sear"> 订单详情</view>
    </view>
    <view class="check">
      <u-icon name="checkbox-mark"></u-icon>
      <text>已使用</text>
    </view>
    <view class="tabs">
      <view class="tabOneitem" v-for="(item, i) in farmlist" :key="i">
        <view class="tabOneitem_left">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabOneitem_right">
          <view class="title">
            <text class="t1"> {{ item.title }}</text>
            <u-icon class="t2" color="#000" name="arrow-right"></u-icon>
          </view>
          <view class="distance">
            <text class="distance1">{{ item.time }}</text>
            <text class="distance1">{{ item.num }}</text>
            <text class="distance1 distance2">¥ {{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="pays">
      <view class="tle">
        <view class="mon">实付金额：</view>
        <view>￥ 120</view>
      </view>
      <view class="dd-num">
        <view class="num">
          <view class="mon"> 订 单 号</view>
          <view class="txt">：123456789001123</view>
          <view class="fz" @tap="copyText">复制</view>
        </view>
        <view class="num">
          <view class="mon"> 手 机 号</view>
          <view>：123456789</view>
        </view>
        <view class="num">
          <view class="mon"> 消费时间</view>
          <view>：2024-3-12 13：15：49</view>
        </view>
        <view class="num">
          <view class="mon"> 付款时间</view>
          <view>：2024-3-12 13：15：20</view>
        </view>
        <view class="num">
          <view class="mon"> 下单时间</view>
          <view>：2024-3-12 13：15：49</view>
        </view>
        <view class="num">
          <view class="mon"> 数 量</view>
          <view>：1</view>
        </view>
        <view class="num">
          <view class="mon"> 总 价</view>
          <view>：￥120</view>
        </view>
        <view class="num">
          <view class="mon"> 实 付</view>
          <view>：￥120</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "detail",
  components: {},
  data: () => ({
    farmlist: [
      {
        id: 2,
        url: "https://img95.699pic.com/xsj/0o/bs/q1.jpg%21/fh/300",
        title: "【两大一小】亲子采摘",
        num: "随时退 过期自动退 免预约",
        price: "230.00",
        tag: "去使用",
        tag1: "黄陂区",
        time: "草莓园 周一到周日",
        ranking: "去评价",
        tag1: "退款进度",
        tag2: "再来一单",
        tag3: "去评价",
        zt: "已关闭",
      },
    ],
  }),
  computed: {},
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  onLoad(options) {},
  // 生命周期 - 页面展示（不可以访问DOM元素）
  onShow() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onReady() {},
  // 方法集合
  methods: {
    copyText() {
      uni.setClipboardData({
        data: "这是要复制的文本内容",
        success() {
          uni.showToast({
            title: "复制成功",
            icon: "success",
          });
          // uni.hideToast();
        },
      });
    },
  },
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.detail {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
  .navs {
    padding-top: 140rpx !important;
    display: flex;
    align-items: center;
    margin-left: 5%;
    .sear {
      margin-left: 33%;
    }
  }
  .check {
    display: flex;
    align-items: center;
    margin: 10rpx 5%;
    text {
      margin-left: 10rpx;
    }
  }
  .tabOneitem {
    display: flex;
    height: 190rpx;
    padding: 15rpx;
    margin: 20rpx 20rpx 40rpx 20rpx;
    background-color: white;
    border-radius: 20rpx;

    .tabOneitem_left {
      width: 140rpx;
      height: 110rpx;
      margin: 20rpx auto;
      // margin-right: 15rpx;
      border-radius: 10rpx;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .tabOneitem_right {
      flex: 1;
      .title {
        font-size: 24rpx;
        color: #4a4543;
        margin-bottom: 5rpx;
        display: flex;
        margin-left: 4%;
        justify-content: space-between;
        .t2 {
          margin-right: 5%;
          color: #8d8683;
        }
      }
      .item_a {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        .img {
          width: 50rpx;
          height: 50rpx;
        }
        .score {
          font-size: 22rpx;
          color: #8d8683;
          margin-top: 10rpx;
          display: inline-block;
          margin-right: 20rpx;
        }
        .comment {
          font-size: 22rpx;
          display: inline-block;
          margin-right: 20rpx;
          color: #8d8683;
        }
        .tickets {
          font-size: 22rpx;
          color: #8d8683;
        }
      }
      .distance {
        display: flex;
        flex-direction: column;
        font-size: 22rpx;
        color: #8d8683;
        margin-left: 5%;

        .distance1 {
          display: inline-block;
          margin: 10rpx 0;
        }
        .distance2 {
          color: #000;
        }
      }
    }
  }
  .pays {
    width: 90%;
    background: #fff;
    margin: 20rpx auto;
    border-radius: 20rpx;
    padding: 25rpx;
    font-size: 28rpx;
    .tle {
      display: flex;
      margin-bottom: 20rpx;
      .mon {
        margin-right: 5%;
      }
    }
    .dd-num {
      color: #8d8683;
      .num {
        display: flex;

        .mon {
          // 文字两端对齐
          text-align-last: justify;
          text-align: justify;
          width: 120rpx;
          margin-right: 10rpx;
        }
        .fz {
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>

